<template>
  <el-card class="home__card-item home__trend">
    <div slot="header" class="home__card-title clearfix">
      <h3>销售趋势</h3>
      <tabs v-model="currentMonth" :tabs="months" size="mini" />
      <el-date-picker v-model="month" type="month" placeholder="选择月">
      </el-date-picker>
    </div>

    <div class="home__card-content">
      <!-- 汇总 -->
      <div class="home__card-content-sum">
        <div class="home__card-content-sum__item" v-show="currentTab != 'customer'">
          <label>{{this.summary.totalAmountText}}</label>
          <span>{{this.summary.totalAmount}}</span>
        </div>
        <div class="home__card-content-sum__item">
          <label>{{this.summary.totalText}}</label>
          <span>{{this.summary.total}}</span>
        </div>
      </div>

      <!-- 详情 -->
      <div class="home__card-content-wrap">
        <tabs v-model="currentTab" :tabs="tabs" />
        <div class="home__trend__content">
          <div ref="echart" class="home__trend__echart"></div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
import Tabs from "./tabs.vue";
import { saleTrend } from '@/api/report/report'
import {
  GetPreMonthDay,
  getBeginAndEndTime
} from '@/utils/dateUtils'

export default {
  data() {
    return {
      month: '',
      summary: {},
      pickerOptions: {
        shortcuts: [
        ]
      },
      currentTab: "customer",
      tabs: [
        { name: "客户", value: "customer" },
        { name: "合同", value: "contract" },
        { name: "订单", value: "order" },
        { name: "首开票", value: "firstInvoicing" },
        { name: "开票", value: "invoicing" },
        { name: "出库", value: "shipment" },
        { name: "回款", value: "receivedPayments" },
      ],
      currentMonth: "this",
      months: [
        { name: "上月", value: "last" },
        { name: "本月", value: "this" },
      ],
      instances: {},
      echartData: [],
    };
  },

  components: {
    Tabs,
  },

  watch: {
    currentMonth() {
      if (this.currentMonth === 'this') {
        this.month = this.parseTime(new Date());
      } else if (this.currentMonth === 'last') {
        this.month = GetPreMonthDay(this.parseTime(new Date()), 1)
      }
    },
    month() {
      this.saleTrend()
    }
  },

  created() {
    this.month = this.parseTime(new Date())
    this.saleTrend()
  },

  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.handleResize);
    });
  },

  methods: {
    saleTrend() {
      var queryParams = {
        createTime: getBeginAndEndTime(this.month)
      }
      saleTrend(this.currentTab, queryParams).then((response) => {
        this.summary = response.data.summary
        this.echartData = response.data.chartList
        this.setOptions()
      })
    },
    currentChange() {

    },
    getTableData() {

    },
    setOptions() {
      this.$nextTick(() => {
        // 圆饼
        this.instances.echart = echarts.init(this.$refs.echart);
        this.instances.echart.setOption({
          grid: {
            left: 30,
            top: 20,
            bottom: 20,
            right: 20
          },
          xAxis: {
            type: 'category',
            data: this.echartData.map(e => e.dayOfMonth)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.echartData.map(e => e.amount),
              type: 'bar'
            },
            {
              type: 'line',
              data: this.echartData.map(e => e.num)
            }
          ]
        });
      })
    },
    handleResize() {
      Object.keys(this.instances).forEach(key => {
        this.instances[key]?.resize?.();
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.home__trend {
  .home__trend__content {
    margin: 20px 0;
    display: flex;
    height: 200px;
    .home__trend__echart,
    ::v-deep .el-table:first-child {
      flex: 1;
      margin-right: 30px;
    }
    :v-deep .el-table {
      width: 100%;
    }
  }
}
</style>
